<template>
	<view>
		<!--  @tap="onMapTap" -->
		<map class="map" :latitude="map.latitude" :longitude="map.longitude" :markers="map.covers" :scale="map.scale"
			:polyline="map.polyline"></map>
		<view class="footer">
			<view class="flexb" style="">
				<view class="cen" style="width: 33%;">
					<bing-countup ref="countUp" class="xctime" :font-size="22" color="#000" @change="onChange" />
					<view class="f15 color8E">巡边时长</view>
				</view>
				<view class="cen"  style="width: 33%;">
					<view class="xctime">{{speed}}<text class="f12">Km/h</text></view>
					<view class="f15 color8E">速度</view>
				</view>
				<view class="cen"  style="width: 33%;">
					<view class="xctime">{{licheng}}<text class="f12">KM</text></view>
					<view class="f15 color8E">巡边里程</view>
				</view>
			</view>
			<view v-if="isshow==1" class="flexb" style="padding: 0 4%;margin: 6% 0;">
				<view style="text-align: center;" @click="pause">
					<image class="icon" src="../../static/icon/pingan.png" mode="aspectFill"></image>
					<view class="f15">
						平安报
					</view>
				</view>
				<view class="pause" @click="pause">
					暂停
				</view>
				<view @click="find_q" style="text-align: center;">
					<image class="icon" src="../../static/icon/jinggao.png" mode="aspectFill" style="width: 54rpx;height: 54rpx;"></image>
					<view class="f15">
						发现问题
					</view>
				</view>
			</view>
			<view v-if="isshow==2" class="flexb" style="padding: 0 14%;margin: 6% 0;">
				<view class="jieshu" @click="jieshu">
					结束
				</view>
				<view class="jixu" @click="start">
					继续
				</view>
			</view>
			<view class="bott f12">
				已记录巡边问题发现数：<text style="color: #4C7BAE;">{{q_num}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	const aMapHelper = uni.requireNativePlugin("SLY-AMapHelper");
	import BingCountup from "@/components/bing-countup/bing-countup.vue";
	import AMap from '../../libs/amap-uni.js';
	import QQMapWX from '../../libs/qqmap-wx-jssdk/qqmap-wx-jssdk.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import myIssue from '@/components/myIssue.vue';
	import helper from '../../common/helper.js';
	import api from '../../common/api.js';
	export default {
		components: {
			uniPopup,
			myIssue,
			BingCountup
		},
		data() {
			return {
				qqmapsdk: {},
				map: {
					longitude: '116.4',
					latitude: '39.9',
					covers: [],
					polyline: [{
						points: [],
						color: '#0055ff',
						width: 20,
						dottedLine: true,
						borderWidth: 20,
						colorList: true,
					}],
					scale: 16
				},
				poins: [],
				myLng: '',
				myLat: '',
				coorType: 'gcj02',
				isshow: 1,
				licheng: 0,
				duration: '',
				q_num: 0,
				reportid: 0,
				speed:0,
				myAmapFun: null,
				question:{
					address:'',
					description:'',
					lat:0,
					lng:0
				},
				times:0
			}
		},
		onBackPress() {
			aMapHelper.stopLocation();
		},
		onLoad(op) {
			this.reportid = op.reportid;
			this.initSdk();
			// this.getweizhi();
			this.onceLocation();
			this.trackLocation();
			console.log("【持续定位结果】");
			this.myAmapFun = new AMap.AMapWX({
				key: '5869a2e007241eca15743ccb35a2080d'
			});
			// 保持屏幕常亮
			uni.setKeepScreenOn({
				keepScreenOn: true
			});
		},
		methods: {
			//单次定位
			onceLocation() {
				let _this = this;
				// uni.showLoading({
				// 	title: '定位中...'
				// })
				this.result = ''
				aMapHelper.getLocation({
					coordType: this.coorType
				}, (res) => {
					uni.hideLoading();
					console.log("定位结果", res);
					if (res.errorCode == 0) {
						this.myLng = res.longitude;
						this.myLat = res.latitude;
						_this.map.longitude = res.longitude;
						_this.map.latitude = res.latitude;
						_this.poins.push({
							x: res.longitude,
							y: res.latitude,
							sp: res.speed,
							ag: res.bearing,
							tm: res.time
						})
						let zb = [];
						_this.map.polyline[0].points.push({
							longitude: res.longitude,
							latitude: res.latitude
						})
						_this.map.covers[0] = {
							latitude: res.latitude,
							longitude: res.longitude,
							width: 20,
							iconPath: '../../static/r.png'
						};
						console.log('polyline', _this.map.polyline);
					} else if (res.errorCode == 12) { //用户拒绝定位权限
						//当用户选择了“拒绝且不再询问”时，应用无法再弹出权限申请框，必须引导用户前往设置页面手动开启。
						uni.hideLoading();
						let deniedPermissionAndNoAsk = res.deniedPermissionAndNoAsk;
						uni.showModal({
							title: '提示',
							content: res.errorInfo,
							success: (res) => {
								if (res.confirm && deniedPermissionAndNoAsk) {
									//打开设置页面
									aMapHelper.openSettingPage();
								}
							}
						})
					}

				})
			},
			//连续定位
			trackLocation() {
				var _this = this;
				this.result = '';
				let count = 0;
				aMapHelper.trackLocation({
					intervalTime: 1000, //定位间隔时间
					spacing: 0, //有效移动距离，超过该值才会回调
					coordType: this.coorType,
					isAlwaysAsk:false
				}, (res) => {
					//调试时请以控制台日志是否持续打印为准，息屏后view页面可能不会更新result结果
					// console.log("【角度】", res.bearing);
					// console.log("【速度】", res.speed);
					console.log("【持续定位结果】", res);
					if (res.errorCode == 0) {
						var up_add = api.up_add({
							lat: res.latitude,
							lng: res.longitude,
							bearing: res.bearing,
							speed: res.speed,
							time: res.time,
							times:_this.times,
							reportid: _this.reportid
						}).then(data => {
							console.log('定位结果上传返回信息：', data);
							_this.q_num=data.data.qtotal;
						});
						_this.poins.push({
							x: res.longitude,
							y: res.latitude,
							sp: res.speed,
							ag: res.bearing,
							tm: res.time
						})
						_this.speed=(res.speed*3.6).toFixed(2);
						// console.log('定位结果上传返回信息：', _this.poins);
						// this.myAmapFun.getGraspRoad({
						// 	data: _this.poins,
						// 	success: function(data) {
						// 		console.log('轨迹纠偏：', data);
						// 		var points = [];
						// 		for (var i = 0; i < data.points.length; i++) {
						// 			points.push({
						// 				longitude: data.points[i].x,
						// 				latitude: data.points[i].y
						// 			})
						// 		}
						// 		_this.map.polyline[1].points = points;
						// 	},
						// 	fail: function(info) {
						// 		console.log('info：', info);
						// 	}
						// })
						_this.licheng1(res.latitude, res.longitude);
						_this.map.polyline[0].points.push({
							longitude: res.longitude,
							latitude: res.latitude
						})
						_this.map.covers[1] = {
							latitude: res.latitude,
							longitude: res.longitude,
							rotate:res.bearing,
							width: 20,
							callout:{
								content:'张三'
							},
							iconPath: '../../static/car.png'
						};
						_this.map.longitude = res.longitude;
						_this.map.latitude = res.latitude;
						_this.question={
							address:res.address,
							description:res.description,
							longitude:res.longitude,
							latitude:res.latitude,
						}
						// console.log('polyline', _this.map.polyline);
					} else if (res.errorCode == 12) {
						let deniedPermissionAndNoAsk = res.deniedPermissionAndNoAsk;
						uni.showModal({
							title: '提示',
							content: res.errorInfo,
							success: (res) => {
								if (res.confirm && deniedPermissionAndNoAsk) {
									aMapHelper.openSettingPage();
								}
							}
						})
					} else {
						console.log("其它错误", `${res.errorCode}:${res.errorInfo}`);
					}
				})
			},
			//停止定位
			stopLocation() {
				aMapHelper.stopLocation();
			},
			//计算坐标距离
			calcDistance() {
				let distance = aMapHelper.calcDistance({
					lngLat1: [116.368904, 39.9234230],
					lngLat2: [116.387271, 39.922501]
				})
				this.result = `距离：${distance}米`
			},
			//逆地址编码，即根据坐标反查位置信息
			onGeoQuery() {
				if (this.myLng == 0 || this.myLat == 0) {
					uni.showToast({
						title: '请先执行单次定位',
						icon: 'none'
					})
					return;
				}
				aMapHelper.reGeoQuery({
					lng: this.myLng,
					lat: this.myLat,
					radius: 200, //范围多少米
					coordType: this.coordTyps[this.coordIndex] //火系坐标系还是GPS原生坐标系,仅支持"gcj02","wgs84"2中
				}, res => {
					console.log("逆地址结果", res);
					if (res.errorCode == 0) {
						//成功,更多结果，打印res.result
						this.result = res.result.formatAddress
					} else {
						//失败
						this.result = res.msg;
					}
				})
			},
			// async linshi(){
			// 	var _this = this;
			// 	//获取临时任务点
			// 	var res = await api.linshi();
			// 	res.data.map(item=>{
			// 		this.map.covers.push({
			// 		  latitude: parseFloat(item.latitude),
			// 		  longitude: parseFloat(item.longitude),
			// 		  iconPath: '../../static/lin.png'
			// 		});
			// 	})
			// },
			async getweizhi() {
				var _this = this;
				//获取位置
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						// 当前地址
						this.currLocation = res;

						// 设置地图信息
						this.map.latitude = res.latitude;
						this.map.longitude = res.longitude;
						let mp1 = uni.getStorageSync('map1')

						let distance = aMapHelper.calcDistance({
							lngLat1: [mp1.longitude, mp1.latitude],
							lngLat2: [res.longitude, res.latitude]
						})
						console.log('lng', [res.longitude, res.latitude]);
						console.log('distance', distance);
						this.licheng = parseFloat(distance / 1000).toFixed(2);
						//上传地址
						var up_add = api.up_add({
							lat: res.latitude,
							lng: res.longitude,
							reportid: _this.reportid
						});
						// 坐标点
						this.map.covers.push({
							latitude: res.latitude,
							longitude: res.longitude,
							width: 30,
							iconPath: '../../static/r.png'
						});
					}
				});
			},
			initSdk() {
				this.qqmapsdk = new QQMapWX({
					key: helper.config.qqmapsdk.key
				});
			},
			find_q() {
				console.log('跳转参数',JSON.stringify(this.question))
				uni.navigateTo({
					url: '/pages/question/question?reportid=' + this.reportid+'&question='+JSON.stringify(this.question)
				})
			},
			//开始
			start() {
				this.$refs.countUp.start();
				this.isshow = 1;
			},
			// 暂停
			pause() {
				this.$refs.countUp.pause();
				this.isshow = 2;
			},
			// 重置
			reset() {
				this.$refs.countUp.reset();
			},
			onChange(e) {
				console.log('time',e)
				this.times=e.seconds;
				this.duration = e.hour + ':' + e.minute + ':' + e.second;
			},
			//里程
			async licheng1(lat, lng) {
				let mp1 = uni.getStorageSync('map1')
				// console.log('mp1', mp1);
				let from = uni.getStorageSync('map1').latitude + ',' + uni.getStorageSync('map1').longitude;
				let to = lat + ',' + lng;
				let distance = aMapHelper.calcDistance({
					lngLat1: [mp1.longitude, mp1.latitude],
					lngLat2: [lng, lat]
				})
				console.log('distance', distance);
				this.licheng = parseFloat(distance / 1000).toFixed(2);
			},
			//结束
			async jieshu() {
				var _this = this;
				aMapHelper.stopLocation();
				aMapHelper.getLocation({
					coordType: this.coorType
				}, (res) => {
					uni.hideLoading();
					console.log("定位结果", res);
					if (res.errorCode == 0) {
						_this.map.longitude = res.longitude;
						_this.map.latitude = res.latitude;
						api.jieshu({
							reportid: _this.reportid,
							lat: _this.map.latitude,
							lng: _this.map.longitude,
							// quyu:_this.options.quyu_id,
							licheng: _this.licheng,
							duration: _this.duration,
							q_num: _this.q_num
						}).then(res => {
							if (res.code == 1) {
								// uni.redirectTo({
								// 	url: '/pages/taxiService/inspections1'
								// })
								uni.navigateBack({

								})
							}
						})
					} else if (res.errorCode == 12) { //用户拒绝定位权限
						//当用户选择了“拒绝且不再询问”时，应用无法再弹出权限申请框，必须引导用户前往设置页面手动开启。
						uni.hideLoading();
						let deniedPermissionAndNoAsk = res.deniedPermissionAndNoAsk;
						uni.showModal({
							title: '提示',
							content: res.errorInfo,
							success: (res) => {
								if (res.confirm && deniedPermissionAndNoAsk) {
									//打开设置页面
									aMapHelper.openSettingPage();
								}
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	uni-map {
		width: 100%;
		height: 930rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #ffffff;
		padding: 30rpx;
	}

	.xctime {
		font-size: 46rpx;
		margin-bottom: 24rpx;
	}

	.icon {
		width: 60rpx;
		height: 60rpx;
	}

	.pause {
		width: 200rpx;
		height: 200rpx;
		color: #ffffff;
		font-size: 30rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 200rpx;
		background-color: #FEC360;
	}

	.jieshu {
		width: 200rpx;
		height: 200rpx;
		color: #ffffff;
		font-size: 30rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 200rpx;
		background-color: #FA5E5F;
	}

	.jixu {
		width: 200rpx;
		height: 200rpx;
		color: #ffffff;
		font-size: 30rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 200rpx;
		background-color: #3DC571;
	}

	.bott {
		background-color: #F3F6F7;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 16rpx;
		padding: 0 20rpx;
		width: 56%;
		text-align: center;
		margin: auto;
	}
</style>
